<!DOCTYPE html>
<html>
  <head>
    <title>Example for browser envionments</title>
  </head>

  <body>
    <p>
      Open the console and check the window object. Run
      <code>npm run pack</code> first to generate browser.js
    </p>
    <script
      src="https://cdn.ethers.io/lib/ethers-5.0.umd.min.js"
      type="text/javascript"
    ></script>
    <script type="text/javascript" src="../browser.js"></script>
    <script>
      const network = "mainnet";
      const sources = synthetix.getSource({network});
      console.log("sources", sources);
      const targets = synthetix.getTarget({network});
      console.log("targets", targets);
      const synths = synthetix.getSynths({network});
      console.log("synths", synths);
      const users = synthetix.getUsers({network});
      console.log("users", users);
      console.log(
        "synthetix.toBytes32 correct?",
        synthetix.toBytes32("SNX") ===
          "0x534e580000000000000000000000000000000000000000000000000000000000"
      );
      const sETHContract = new ethers.Contract(
        targets.SynthsETH.address,
        sources[targets.SynthsETH.source].abi,
        ethers.getDefaultProvider(network)
      );
      sETHContract.totalSupply().then(unformattedTotalSupply => {
        console.log(
          "sETH supply",
          ethers.utils.formatEther(unformattedTotalSupply)
        );
      });
    </script>
  </body>
</html>
